import React from 'react';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Button, Card, Col, Flex, GetProps, Input, Pagination, Row } from 'antd';

const { Meta } = Card;
const { Search } = Input;

type SearchProps = GetProps<typeof Input.Search>;
const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);

const App: React.FC = () => (
  <div>
    <div style={{ display: 'flex' }}>
      <Search
        placeholder="input search text"
        onSearch={onSearch}
        style={{ width: 500, height: 48, margin: '0 auto' }}
      />
    </div>
    <Flex gap="small" wrap>
      <Button color="cyan" variant="solid">
        Solid
      </Button>
    </Flex>
    <Row gutter={[16, 32]}>
      <Col span={5}>
        <Card
          title="Card 1"
          variant="borderless"
          style={{ width: 200 }}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />}
            title="Card title 1"
          />
        </Card>
      </Col>
      <Col span={5}>
        <Card
          title="Card 2"
          variant="borderless"
          style={{ width: 200 }}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />}
            title="Card title 2"
          />
        </Card>
      </Col>
      <Col span={5}>
        <Card
          title="Card 3"
          variant="borderless"
          style={{ width: 200 }}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=3" />}
            title="Card title 3"
          />
        </Card>
      </Col>
      <Col span={5}>
        <Card
          title="Card 3"
          variant="borderless"
          style={{ width: 200 }}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=3" />}
            title="Card title 3"
          />
        </Card>
      </Col>
      <Col span={5}>
        <Card
          title="Card 3"
          variant="borderless"
          style={{ width: 200 }}
          cover={
            <img
              alt="example"
              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
            />
          }
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Meta
            avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=3" />}
            title="Card title 3"
          />
        </Card>
      </Col>
    </Row>
    <Pagination defaultCurrent={6} total={500} align="center" pageSizeOptions={[8,16,24]} />;
  </div>
);

export default App;
